<template>
	<div>
		<form>
			<el-form-item label="工单类型" class="gdlx">
				<el-select v-model="form.orderlx_id" clearable placeholder="请选择工单类型" style="width: 240px">
					<el-option  v-for="item in gdlxoptions.order_name" :key="item.orderlx_id" :label="item.order_name"
						:value="item.order_name" />
				</el-select>
			</el-form-item>
			<el-form-item label="工单状态" class="gdzt">
				<el-select v-model="value" clearable placeholder="选择工单状态" style="width: 200px">
					<el-option v-for="item in options" :key="item.value" :label="item.label" :value="item.value" />
				</el-select>
			</el-form-item>
			<el-form-item label="执行人" style="margin-left: 15px;">
				<el-select v-model="zxrvalue" multiple placeholder="选择执行人(可多选)" style="width: 240px;">
					<el-option v-for="item in zxroptions.user_name" :key="item.user_name" :label="item.user_name"
						:value="item.user_name" />
				</el-select>
			</el-form-item>
			<el-form-item label="最近更新时间" class="zjgxsj">
				<el-config-provider :locale="locale">
					<el-date-picker v-model="form.zjgx_time" format="YYYY-MM-DD"
						value-format="YYYY-MM-DD" type="daterange" range-separator="至" start-placeholder="开始时间"
						end-placeholder="结束时间" />
				</el-config-provider>
			</el-form-item>
			<el-form-item label="创建时间" class="cjsj">
				<el-config-provider :locale="locale">
					<el-date-picker v-model="form.chuang_time" format="YYYY-MM-DD"
						value-format="YYYY-MM-DD" type="daterange" range-separator="至" start-placeholder="开始时间"
						end-placeholder="结束时间" />
				</el-config-provider>
			</el-form-item>
			<el-form-item label="完成时间" class="wcsj">
				<el-config-provider :locale="locale">
					<el-date-picker v-model="form.wc_time" format="YYYY-MM-DD"
						value-format="YYYY-MM-DD" type="daterange" range-separator="至" start-placeholder="开始时间"
						end-placeholder="结束时间" />
				</el-config-provider>
			</el-form-item>
			<div class="czcx">
				<el-button class="btn1">重置</el-button>
				<el-button class="btn2">查询</el-button>
			</div>
			
		</form>
	</div>
</template>

<script lang="ts" setup>
	import zhCn from "element-plus/dist/locale/zh-cn";
	import { ref, reactive } from 'vue';
	import $http from '../router/AxiosApi';
	const locale = zhCn;
	const form = reactive({
		order_id: '',
		order_hao: '',
		chuang_time: '',
		qz_time: '',
		state: '',
		executor: '',
		order_label: '',
		zjgx_time: '',
		adress: '',
		reviewer: '',
		sh_time: '',
		shyy: '',
		wc_time: '',
		ordernr: '',
		order_name: '',
		orderlx_id: '',
	})
	const gdlxoptions = reactive(
		{ order_name: [] }
	)
	$http.post("OrderLX").then((res) => {
		gdlxoptions.order_name = res.data.data
	})
	const value = ref('')
	const options = [
		{ value: '待审核', label: '待审核' },
		{ value: '待处理', label: '待处理' },
		{ value: '处理中', label: '处理中' },
		{ value: '已闭单', label: '已闭单' },
		{ value: '已作废', label: '已作废' },
	]
	const zxrvalue = ref([])
	const zxroptions = reactive(
		{ user_name: [] }
	)
	$http.post("ZhiXingRen").then((res) => {
		zxroptions.user_name = res.data.data
	})
</script>

<style scoped>
	.gdbq {
		margin-left: 700px;
		margin-top: -50px;
	}

	.gdzt {
		margin-left: 700px;
		margin-top: -50px;
	}

	.gdsjzt {
		margin-left: 968px;
		margin-top: -50px;
	}

	.zjgxsj {
		margin-left: 665px;
		margin-top: -50px;
		width: 500px;
	}
	.cjsj{
		width: 470px;
	}
	.wcsj {
		width: 470px;
		margin-left: 695px;
		margin-top: -50px;
	}

	.shsj {
		width: 500px;
		margin-left: 665px;
		margin-top: -50px;
	}

	.btn1 {
		width: 90px;
		height: 35px;
	}

	.btn2 {
		background-color: #00C36D;
		color: white;
		margin-left: 20px;
		width: 90px;
		height: 35px;
	}

	.czcx {
		width: 200px;
	}
</style>